Firefox forces your computer’s default system font on you, which can be a problem if you have a very specific font set for your system UI that doesn’t mesh particularly well with the average website on the internet. This can be especially frustrating when dealing with small, pixel-perfect bitmap fonts. Modern websites often use the CSS rule font-family: system-ui to make web apps feel like native desktop apps. But if you don’t like the way your system font looks like in various sizes, it can be an absolute eyesore.
What didn’t work:
- Heavy-Handed CSS Override: Forcing a new font using the universal
*selector both in Stylus and userChrome/userContent. While it worked, it was actually too aggressive. It wiped out most fonts across the web and made everything look the same. - The Smart
@font-faceAlias: Trying to tell the browser to swap out any request for “system-ui” with a local font like Arial. This usually works for standard fonts, butsystem-uiis a hardcoded browser keyword, so Firefox ignored the trick entirely.
Disabling system-ui in Firefox
The best move is to change how Firefox handles the command at the source. By disabling a hidden flag, you can tell Firefox to ignore the system-ui command completely. Now, when a site asks for it, Firefox ignores it and smoothly falls back to the next standard font on the list!
- Open a new tab in Firefox and type
about:configin the address bar, then press Enter. - Click “Accept the Risk and Continue” to get past the warning screen.
- In the search bar at the top, search for:
layout.css.system-ui.enabled - Double-click the preference (or click the toggle button on the right) to change its value from
truetofalse. - Refresh your browser tabs.
And just like that, the system font is gone.